<template>
	<div class="house-item">
		<img :src="require('./../image/build.png')" alt="" />
		<div class="info">
			<p>房屋编号：{{ details?.fwbh || '-' }}</p>
			<p>房屋地址：{{ details?.address || '-' }}</p>
			<p>房屋状态：{{ +details?.fwzt === 1 ? '不出租' : +details?.fwzt === 2 ? '已拆除' : '正常出租'  }}</p>
		</div>
		<van-icon name="passed" v-if="details.fwbh === active" />
	</div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
	details: {
		type: Object,
		default: () => {}
	},
	active: {
		type: String,
		default: ''
	}
})
</script>

<style scoped lang="less">
.house-item {
	display: flex;
	padding: 24px 32px;
	background: #fff;
	box-shadow: 0 -4px 24px 0 rgba(0, 0, 0, .12);
	border-radius: 12px;
	margin: 24px 32px;
	img {
		width: 72px;
		height: 72px;
	}
	.info {
		width: 0;
		flex: 1;
		margin: 0 12px;
		p:nth-of-type(1) {
			min-height: 50px;
			line-height: 50px;
			font-size: 32px;
			font-weight: 600;
		}
		p:nth-of-type(2) {
			min-height: 40px;
			line-height: 40px;
			margin: 8px 0;
		}
	}
	i {
		font-size: 48px;
		color: var(--van-primary-color);
	}
}
</style>
